import { W_SCREEN, X_TREE, X_COLLIDED, W_RUNNER } from './constant'
// 用于构造tree的
// tree12是2个
// let _trees = []
let _pos = [];
// let _currentTreeInfo = {}
let _treeElem;
// const TREE_NUM = 12
const showWidth = 80

export const initTree = (treeElem) => {
  _treeElem = treeElem
  
  // for (let i = 0; i <= TREE_NUM * 3; i++) {
  //   _trees.push({
  //     num: i % 13,
  //     showWidth: i == 12 ? 160 : 80,
  //     width: i == 12 ? 120 : 60,
  //     cycleLevel: Math.floor(i / TREE_NUM)
  //   })
  // }
  // _trees.push({
  //   num: 13,
  //   showWidth: 80,
  //   width: 60,
  //   cycleLevel: 1
  // })
  // console.log(_trees)
}


// 获取队列头部的树
// export const getCurrentTree = () => {
//   // _currentTreeInfo = _trees.shift()
//   // return _currentTreeInfo
// }

// 判断是否有树
// export const hasTree = () => {
//   return _trees.length > 0;
// }


/**
树的全程动画：x3------x2--x1----------x0

x0 -> x1: 树迎面过来的动画
x1 -> x2: 树通过人的动画
x2 -> x3: 树出去的动画

x0: 左边屏幕触碰点
x1: 落地触碰点
x2: 起跳触碰点
x3: 右边屏幕触屏点
*/

// 获取树的动画位置
export const getTreeAnimationPos = (wtree) => {
  let X3 = (W_SCREEN + wtree / 2) - X_TREE
  let X2 = (X_COLLIDED + wtree / 2 + W_RUNNER / 2) - X_TREE
  let X1 = (X_COLLIDED - wtree / 2 - W_RUNNER / 2) - X_TREE
  let X0 = 0 - wtree / 2 - X_TREE
  return [X0, X1, X2, X3]
}


export const moveTreeProgress1 = (t_tree, cb) => {
  _pos = getTreeAnimationPos(showWidth);
  const [X0, X1, X2, X3] = _pos;
  const keyframes = [
    {
      transformOrigin: "50% 50%",
      time: 0,
      transform: {
        translateX: X3,
      },
    },
    {
      transformOrigin: "50% 50%",
      time: 100,
      transform: {
        translateX: X2,
      },
    }
  ]
  const options = {
    duration: (X3 - X2) / (X3 - X0) * t_tree,
    easing: 'linear',
    // delay: 0,
    fill: 'forwards'
  }
  let animation = _treeElem.animate(keyframes, options)

  animation.onfinish = () => {
    // console.log('树动画1')
    cb()
  }
  animation.play()
}

// 获取本次要穿越的时间
export const getTreeCrossTime = (t_tree) => {
  const [X0, X1, X2, X3] = _pos;
  return (X2 - X1) / (X3 - X0) * t_tree;
}


export const moveTreeProgress2 = (t_tree, cb) => {
  const [X0, X1, X2, X3] = _pos;
  const keyframes = [
    {
      transformOrigin: "50% 50%",
      time: 0,
      transform: {
        translateX: X2,
      },
    },
    {
      transformOrigin: "50% 50%",
      time: 100,
      transform: {
        translateX: X1,
      },
    }
  ]
  const options = {
    duration: (X2 - X1) / (X3 - X0) * t_tree,
    easing: 'linear',
    // delay: 1000,
    fill: 'forwards'
  }
  let animation = _treeElem.animate(keyframes, options)
  animation.onfinish = () => {
    // console.log('树动画2')
    cb()
  }
  animation.play()
}

export const moveTreeProgress3 = (t_tree, cb) => {
  const [X0, X1, X2, X3] = _pos;
  const keyframes = [
    {
      transformOrigin: "50% 50%",
      time: 0,
      transform: {
        translateX: X1,
      },
    },
    {
      transformOrigin: "50% 50%",
      time: 100,
      transform: {
        translateX: X0,
      },
    }
  ]
  const options = {
    duration: (X1 - X0) / (X3 - X0) * t_tree,
    easing: 'linear',
    // delay: 1000,
    fill: 'forwards'
  }
  let animation = _treeElem.animate(keyframes, options)
  animation.onfinish = () => {
    cb()
  }
  animation.play()
}